<template>
  <!-- 多交换机集合 -->

  <div class="collect-big-box" v-if="status">
    <div class="collect-box" v-for="item in list" >
      <groupingitem :list="i" :status="status" v-for="i in item"/>
    </div>
  </div>
  <!-- 单交换机展示 -->
  <el-row v-else  v-for="item in list" >
    <el-col :span="20" style="padding: 15px">
      <groupingitem :list="item.res"/>
    </el-col>
    <el-col :span="4" style="padding: 15px" v-if="item.xRes.length > 0">
      <groupingitem :list="item.xRes"/>
    </el-col>
  </el-row>

</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import groupingitem from './groupingitem.vue';
  export default defineComponent({
    name: 'interfaces',
    components:{groupingitem},
    props: {
      list: propTypes.array,
      status: propTypes.bool,
    },
    setup(props) {

    }
  })
</script>
<style>
  .collect-box{
    border: black 2px solid;
    padding: 15px;
    border-radius: 10px;
    width: 44%;
    display: flex;
    flex-direction: column;
  }
  .collect-big-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
</style>
